<template lang="pug">
transition(name="dialog")
  .dialog-mask(v-if="show")
    .dialog
      .dialog-header
        .dialog-logo
          img(src="../../static/images/login_logo.png")
        .dialog-close
          .iconfont.icon-close(@click.self="close")
      .dialog-content
        .qrcode-container(ref="qrcode")
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getQuickLoginParam } from 'api'
export default {
  name: 'loginModal',
  computed: {
    ...mapState({
      show: state => state.user.login.show
    })
  },
  watch: {
    show (v) {
      if (v) this.$nextTick(() => {
        this.initQrcode()
      })
      else this.$refs.qrcode.childNodes[0].remove()
    }
  },
  data () {
    return {}
  },
  methods: {
    ...mapActions([
      'changeLogin',
    ]),
    close () {
      this.changeLogin({ show: false })
    },
    initQrcode (type) {
      this.loginType = type
      let qrcodeContainer = document.createElement('div')
      let qrcode = document.createElement('div')
      qrcode.class = 'dialog-content'
      qrcodeContainer.id = 'qrcode-container'
      qrcode.appendChild(qrcodeContainer)
      this.$refs.qrcode.appendChild(qrcode)
      this.getQrcode()
    },
    async getQrcode () {
       try {
         const { ResultSet } = await this.$axios.post(getQuickLoginParam)
         var obj = new WwLogin({
           self_redirect: false,
           id: 'qrcode-container', 
           appid: ResultSet.userData.appid,
           agentid: ResultSet.userData.agentid,
           redirect_uri: ResultSet.userData.redirect_uri,
           state: ResultSet.userData.state,
           lang: 'zh'
         })
       } catch (err) {
         console.log(err)
         this.$store.dispatch('$message', { show: true, content: err.message || err.ResultSet.errors })
       }
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.modal-form-item-code {
  .el-input__inner {
    padding-right: 90px;
  }
}
</style>

<style lang="scss" scoped>
.dialog-leave-active {
  transition: opacity .3s ease;
}
.dialog-enter-active,.dialog-leave-active {
  opacity: 0
}
.dialog-enter-active .dialog,
.dialog-leave-active .dialog {
  transform: scale(0);
  opacity: 0;
}
.dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8888;
  background: rgba(0,0,0,.5)
}
.dialog {
  transition: all .3s;
  position: fixed;
  width: 400px;
  height: 540px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: #f5f5f5;
  z-index: 9999;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.dialog-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .iconfont {
    font-size: 18px;
    color: #999;
  }
}
.dialog-logo {
  width: 100px;
}
.dialog-content {
  margin-top: 20px;
  text-align: center;
}
</style>
